<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的主页</title>
    <style>
      body {
        margin: 0;
        background-color: rgb(245, 245, 245);
      }

      div.top {
        width: 100%;
        height: 70px;
        background-color: rgb(36, 36, 36);
      }

      div.topContent {
        width: 1200px;
        height: 70px;
        margin: auto;
        position: relative;
      }

      h1.logo {
        display: block;
        width: 157px;
        height: 69px;
        margin: 0;
        padding-right: 20px;
        float: left;
        background-image: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?79b15b371ac691457849f05e64b4c40a);
      }

      ul.nav {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
      }

      ul.nav li {
        float: left;
      }

      sup.hot {
        display: inline-block;
        width: 28px;
        height: 19px;
        background-image: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?79b15b371ac691457849f05e64b4c40a);
        background-position-x: -190px;
        background-position-y: 0;
        margin-top: 22px;
        margin-left: -10px;
      }

      ul.nav a {
        display: block;
        float: left;
        padding: 0 20px;
        height: 70px;
        text-decoration: none;
        color: rgb(204, 204, 204);
        line-height: 70px;
        margin: auto;
        text-align: center;
        font-size: 14px;
      }

      ul.nav a:hover {
        background-color: black;
      }

      div.searchBox {
        float: left;
        display: block;
        width: 158px;
        height: 70px;
        position: relative;
        margin-left: 85px;
      }

      div.searchBox span {
        display: block;
        width: 158px;
        height: 32px;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-image: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?79b15b371ac691457849f05e64b4c40a);
        background-position-y: -98px;
        background-color: white;
      }

      input.search {
        display: block;
        width: 117px;
        height: 16px;
        margin-left: 30px;
        border: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        outline: none;
      }

      div.searchRes {
        width: 240px;
        height: 240px;
        background-color: white;
        position: absolute;
        top: 60px;
        z-index: 3;
        display: none;
        font-size: 14px;
      }

      div.creator-box {
        width: 100px;
        height: 70px;
        float: left;
        position: relative;
        margin-left: 12px;
      }

      a.creator {
        display: block;
        width: 90px;
        height: 30px;
        border: 1px solid white;
        line-height: 30px;
        text-align: center;
        color: #ccc;
        text-decoration: none;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        border-color: rgb(79, 79, 79);
      }

      div.login-btn-mod {
        width: 28px;
        height: 45px;
        padding-right: 22px;
        float: left;
        z-index: 2;
        position: absolute;
        top: 20px;
        right: 66px;
      }

      img.avatar {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        display: none;
      }

      a.login-btn {
        display: block;
        width: 28px;
        height: 16px;
        margin-top: 7px;
        text-decoration: none;
        color: rgb(120, 120, 120);
        font-size: 12px;
      }

      div.drop-down {
        display: none;
        margin: 8px 0 0 -60px;
      }

      div.drop-down ul {
        width: 158px;
        height: 240px;
        border: 1px solid rgb(32, 32, 32);
        list-style: none;
        padding-left: 0;
        margin: 0;
        background-color: rgb(43, 43, 43);
        box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
      }

      div.drop-down li {
        width: 158px;
        height: 34px;
      }

      div.drop-down li a {
        display: block;
        width: 134px;
        height: 34px;
        padding-left: 24px;
        text-decoration: none;
      }
      div.drop-down li a:hover {
        background-color: rgb(53, 53, 53);
      }

      div.drop-down li a i {
        display: block;
        float: left;
        width: 18px;
        height: 18px;
        margin: 7px 10px 0 0;
        background-image: url(https://s2.music.126.net/style/web2/img/frame/toplist.png?1a01fca269a23929a4153d6ee8d628aa);
      }
      i.home-logo {
        background-position: 0 -80px;
      }
      i.noti-logo {
        background-position: -20px -120px;
      }
      i.level-logo {
        background-position: 0 -100px;
      }
      i.vip-logo {
        background-position: 0 -221px;
      }

      i.preference-logo {
        background-position: 0 -140px;
      }
      i.kyc-logo {
        background-position: -20px -142px;
      }

      i.log-out-logo {
        background-position: 0 -200px;
      }

      div.drop-down li a em {
        display: inline-block;
        height: 34px;
        line-height: 34px;
        color: rgb(204, 204, 204);
        font-style: normal;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <!-- 主导航条 -->
    <div class="top">
      <div class="topContent">
        <a href="https://music.163.com/#">
          <h1 class="logo"></h1>
        </a>
        <ul class="nav">
          <li><a href="">发现音乐</a></li>
          <li><a href="">我的音乐</a></li>
          <li><a href="">关注</a></li>
          <li><a href="">商城</a></li>
          <li><a href="">音乐人</a></li>
          <li>
            <a href="">下载客户端</a>
            <sup class="hot">&nbsp;</sup>
          </li>
        </ul>
        <div class="searchBox">
          <span
            ><input
              type="text"
              name=""
              class="search"
              placeholder="音乐/视频/电台/用户"
          /></span>
          <div class="searchRes"></div>
        </div>
        <div class="creator-box">
          <a href="" class="creator">创作者中心</a>
        </div>

        <div class="login-btn-mod">
          <div class="login-btn-box">
            <img
              class="avatar"
              src="https://p3.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg"
              alt=""
            />
            <a href="" class="login-btn">登录</a>
          </div>
          <div class="drop-down">
            <ul>
              <li>
                <a href=""><i class="home-logo"></i><em>我的主页</em></a>
              </li>
              <li>
                <a href=""><i class="noti-logo"></i><em>我的消息</em></a>
              </li>
              <li>
                <a href=""><i class="level-logo"></i><em>我的等级</em></a>
              </li>
              <li>
                <a href=""><i class="vip-logo"></i><em>VIP会员</em></a>
              </li>
              <li>
                <a href=""><i class="preference-logo"></i><em>个人设置</em></a>
              </li>
              <li>
                <a href=""><i class="kyc-logo"></i><em>实名认证</em></a>
              </li>
              <li>
                <a href="" class="log-out"
                  ><i class="log-out-logo"></i><em>退出</em></a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
